<?php
ob_start();
session_start();
//include "checksession.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<!-- นำสคริปต่างๆ เข้ามา -->
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/flexigrid.pack.js"></script>
<link href="../css/flexigrid.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<!--<script src="http://code.jquery.com/jquery-1.8.2.js"></script>-->
<!--jquery script-->
<script>
$(function() {
    $( '#tabs' ).tabs();
});
</script>
<script type="text/javascript">
 
$(document).ready(function(){
 
	$("#table").flexigrid({ // กำหนดให้สร้าง data grid ให้กับ แท็ก table ที่มี id=table
			url: 'flexigrid_data.php', // กำหนด url ของไฟล์ที่จะใช้เชื่อมต่อฐานข้อมูลมาแสดง
			dataType: 'json', // กำหนดชนิดของไฟล์ข้อมูลที่ต้องการใช้งานในที่นี้ใช้ json 
			colModel : [  // กำหนดลักษณะการแสดงของคอลัมน์ในตาราง อ่านคำอธิบายด้านล่าง
					
					{display: 'ชื่ออุปกรณ์', name : 'prd_name', width : 100, sortable : true, align: 'left'},
					{display: 'รหัสทรัพย์สิน', name : 'pd_codeAdinop', width : 100, sortable : true, align: 'center'},
					{display: 'รหัส IT', name : 'pd_code', width : 60, sortable : true, align: 'center'},
					{display: 'ประเภทอุปกรณ์', name : 'type_name', width : 80, sortable : true, align: 'center'},
					{display: 'รหัสพนักงาน', name : 'emp_id', width : 80, sortable : true, align: 'center'},
					{display: 'วันที่เบิก', name : 'pd_outDate', width : 80, sortable : true, align: 'center'},
					     		],
									//		display คือ กำหนด ชื่อข้อความที่ต้องการแสดงหัวข้อคอลัมน์
									//		name คือ ชื่อ field ของตารางในฐานข้อมูลที่สอดคล้องกัน
									//		widh คือ ความกว้างของคอลัมน์ที่ต้องการแสดง หน่วยเป็น pixel (กำหนดแต่ตัวเลข) 
									//		sortable คือ กำหนดว่าคอลัมน์สามารถทำการเรียงข้อมูลได้หรือไม่ ค่า true / false
									//		align คือ กำหนดการจัดตำแหน่งการแสดงข้อมูล ค่า left / center / right
									//		hide คือ กำหนดให้แสดงหรือไม่แสดงคอลัมน์นั้น ค่า true / false (ส่วนเพิ่มเติม กำหนดหรือไม่ก็ได้)
	         
			searchitems : [ // ปุ่ม search กำหนดให้ค้นหาจากอะไรได้บ้าง ถ้าต้องการให้ค่า default เป็นอะไร ให้ตั้งค่า isdefault: true
				{display: 'รหัสพนักงาน', name : 'emp_id', isdefault: true},
				{display: 'รหัสทรัพย์สิน', name : 'pd_codeAdinop'}
				],
 
			sortname: "pd_code",	 // กำหนดการจัดเรียงเริ่มต้น ว่าต้องการให้เรียงตาม field อะไรในฐานข้อมูล 
			sortorder: "desc",	 // กำหนดเรียกจากมากไปน้อย หรือน้ยอไปมาก desc / asc
			usepager: true,	 // กำหนดให้แสดงส่วนการแบ่งหน้าหรือไม่ true / false
			title: 'อุปกรณ์ต่างๆ แผนก เทคโนโลยีสารสนเทศ',	 // หัวข้อตาราง
			useRp: true, 	// กำหนดให้แสดงการ กำหนดจำนวนรายการแสดงต่อหน้า หรือไม่ true / false
          			 // useRp:true,
			rp: 10, 	// กำหนดจำนวนรายการที่จะแสดงในแต่ละหน้า
			showTableToggleBtn: false,	 // กำหนดให้แสดงปุ่ม ซ่อน / แสดงตารางหรือไม่ true / false
			width: 1000, 	// กำหนดความกว้าง
			height: 400,
			singleSelect: true
  	// กำหนดความสูง
			});   
 
 
 
});
function doCommand(com, grid) {
 
if(com=='Add'){	//เหตุการณ์เมื่อมีการกดปุ่ม เพิ่มข้อมูล 
	$.fancybox({
				'width'				: '35%',
				'height'			: '35%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe',
				'href'			: 'add.php', // หน้าที่ต้องการจะให้บ๊อปอัพขึ้นมา
			});
 
	}else if (com == 'Edit') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
  //alert("Edit row " + id); 
$.fancybox({
				'width'				: '35%',
				'height'			: '35%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe',
				'href'			: 'edit.php?id='+id,//ค่่าที่ต้องการส่งไป ในที่นี้แบบ GET
			});
 
 
 
});
} else if (com == 'Delete') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
if(confirm('Are you sure you want to delete?')){
$.get('del.php?At_ID='+id, function(data) {
$.fancybox(data);
 
});
}
});
}
}
</script>
 <script type="text/javascript">
 
$(document).ready(function(){
 
	$("#table1").flexigrid({ // กำหนดให้สร้าง data grid ให้กับ แท็ก table ที่มี id=table
			url: 'flexigrid_data.php', // กำหนด url ของไฟล์ที่จะใช้เชื่อมต่อฐานข้อมูลมาแสดง
			dataType: 'json', // กำหนดชนิดของไฟล์ข้อมูลที่ต้องการใช้งานในที่นี้ใช้ json 
			colModel : [  // กำหนดลักษณะการแสดงของคอลัมน์ในตาราง อ่านคำอธิบายด้านล่าง
					
					{display: 'ชื่ออุปกรณ์', name : 'prd_name', width : 100, sortable : true, align: 'left'},
					{display: 'รหัสทรัพย์สิน', name : 'pd_codeAdinop', width : 100, sortable : true, align: 'center'},
					{display: 'รหัส IT', name : 'pd_code', width : 60, sortable : true, align: 'center'},
					{display: 'ประเภทอุปกรณ์', name : 'type_name', width : 80, sortable : true, align: 'center'},
					{display: 'รหัสพนักงาน', name : 'emp_id', width : 80, sortable : true, align: 'center'},
					{display: 'วันที่เบิก', name : 'pd_outDate', width : 80, sortable : true, align: 'center'},
					     		],
									//		display คือ กำหนด ชื่อข้อความที่ต้องการแสดงหัวข้อคอลัมน์
									//		name คือ ชื่อ field ของตารางในฐานข้อมูลที่สอดคล้องกัน
									//		widh คือ ความกว้างของคอลัมน์ที่ต้องการแสดง หน่วยเป็น pixel (กำหนดแต่ตัวเลข) 
									//		sortable คือ กำหนดว่าคอลัมน์สามารถทำการเรียงข้อมูลได้หรือไม่ ค่า true / false
									//		align คือ กำหนดการจัดตำแหน่งการแสดงข้อมูล ค่า left / center / right
									//		hide คือ กำหนดให้แสดงหรือไม่แสดงคอลัมน์นั้น ค่า true / false (ส่วนเพิ่มเติม กำหนดหรือไม่ก็ได้)
	          buttons : [
			            {name: 'Add', bclass: 'add', onpress : doCommand},
                        {name: 'Edit', bclass: 'edit', onpress : doCommand},
                        {name: 'Delete', bclass: 'delete', onpress : doCommand},
                        {separator: true}
 
                ],	
			searchitems : [ // ปุ่ม search กำหนดให้ค้นหาจากอะไรได้บ้าง ถ้าต้องการให้ค่า default เป็นอะไร ให้ตั้งค่า isdefault: true
				{display: 'รหัสพนักงาน', name : 'emp_id', isdefault: true},
				{display: 'รหัสทรัพย์สิน', name : 'pd_codeAdinop'}
				],
 
			sortname: "pd_code",	 // กำหนดการจัดเรียงเริ่มต้น ว่าต้องการให้เรียงตาม field อะไรในฐานข้อมูล 
			sortorder: "desc",	 // กำหนดเรียกจากมากไปน้อย หรือน้ยอไปมาก desc / asc
			usepager: true,	 // กำหนดให้แสดงส่วนการแบ่งหน้าหรือไม่ true / false
			title: 'อุปกรณ์ต่างๆ แผนก เทคโนโลยีสารสนเทศ',	 // หัวข้อตาราง
			useRp: true, 	// กำหนดให้แสดงการ กำหนดจำนวนรายการแสดงต่อหน้า หรือไม่ true / false
          			 // useRp:true,
			rp: 10, 	// กำหนดจำนวนรายการที่จะแสดงในแต่ละหน้า
			showTableToggleBtn: false,	 // กำหนดให้แสดงปุ่ม ซ่อน / แสดงตารางหรือไม่ true / false
			width: 1000, 	// กำหนดความกว้าง
			height: 400,
			singleSelect: true
  	// กำหนดความสูง
			});   
 
 
 
});
function doCommand(com, grid) {
 
if(com=='Add'){	//เหตุการณ์เมื่อมีการกดปุ่ม เพิ่มข้อมูล 
	$.fancybox({
				'width'				: '35%',
				'height'			: '35%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe',
				'href'			: 'add.php', // หน้าที่ต้องการจะให้บ๊อปอัพขึ้นมา
			});
 
	}else if (com == 'Edit') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
  //alert("Edit row " + id); 
$.fancybox({
				'width'				: '35%',
				'height'			: '35%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe',
				'href'			: 'edit.php?id='+id,//ค่่าที่ต้องการส่งไป ในที่นี้แบบ GET
			});
 
 
 
});
} else if (com == 'Delete') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
if(confirm('Are you sure you want to delete?')){
$.get('del.php?At_ID='+id, function(data) {
$.fancybox(data);
 
});
}
});
}
}
</script>
</head>
 <script type="text/javascript">
 
$(document).ready(function(){
 
	$("#table2").flexigrid({ // กำหนดให้สร้าง data grid ให้กับ แท็ก table ที่มี id=table
			url: 'flexigrid_data.php', // กำหนด url ของไฟล์ที่จะใช้เชื่อมต่อฐานข้อมูลมาแสดง
			dataType: 'json', // กำหนดชนิดของไฟล์ข้อมูลที่ต้องการใช้งานในที่นี้ใช้ json 
			colModel : [  // กำหนดลักษณะการแสดงของคอลัมน์ในตาราง อ่านคำอธิบายด้านล่าง
					
					{display: 'ชื่ออุปกรณ์', name : 'prd_name', width : 100, sortable : true, align: 'left'},
					{display: 'รหัสทรัพย์สิน', name : 'pd_codeAdinop', width : 100, sortable : true, align: 'center'},
					{display: 'รหัส IT', name : 'pd_code', width : 60, sortable : true, align: 'center'},
					{display: 'ประเภทอุปกรณ์', name : 'type_name', width : 80, sortable : true, align: 'center'},
					{display: 'รหัสพนักงาน', name : 'emp_id', width : 80, sortable : true, align: 'center'},
					{display: 'วันที่เบิก', name : 'pd_outDate', width : 80, sortable : true, align: 'center'},
					     		],
									//		display คือ กำหนด ชื่อข้อความที่ต้องการแสดงหัวข้อคอลัมน์
									//		name คือ ชื่อ field ของตารางในฐานข้อมูลที่สอดคล้องกัน
									//		widh คือ ความกว้างของคอลัมน์ที่ต้องการแสดง หน่วยเป็น pixel (กำหนดแต่ตัวเลข) 
									//		sortable คือ กำหนดว่าคอลัมน์สามารถทำการเรียงข้อมูลได้หรือไม่ ค่า true / false
									//		align คือ กำหนดการจัดตำแหน่งการแสดงข้อมูล ค่า left / center / right
									//		hide คือ กำหนดให้แสดงหรือไม่แสดงคอลัมน์นั้น ค่า true / false (ส่วนเพิ่มเติม กำหนดหรือไม่ก็ได้)
	          buttons : [
			            {name: 'Add', bclass: 'add', onpress : doCommand},
                        {name: 'Edit', bclass: 'edit', onpress : doCommand},
                        {name: 'Delete', bclass: 'delete', onpress : doCommand},
                        {separator: true}
 
                ],	
			searchitems : [ // ปุ่ม search กำหนดให้ค้นหาจากอะไรได้บ้าง ถ้าต้องการให้ค่า default เป็นอะไร ให้ตั้งค่า isdefault: true
				{display: 'รหัสพนักงาน', name : 'emp_id', isdefault: true},
				{display: 'รหัสทรัพย์สิน', name : 'pd_codeAdinop'}
				],
 
			sortname: "pd_code",	 // กำหนดการจัดเรียงเริ่มต้น ว่าต้องการให้เรียงตาม field อะไรในฐานข้อมูล 
			sortorder: "desc",	 // กำหนดเรียกจากมากไปน้อย หรือน้ยอไปมาก desc / asc
			usepager: true,	 // กำหนดให้แสดงส่วนการแบ่งหน้าหรือไม่ true / false
			title: 'อุปกรณ์ต่างๆ แผนก เทคโนโลยีสารสนเทศ',	 // หัวข้อตาราง
			useRp: true, 	// กำหนดให้แสดงการ กำหนดจำนวนรายการแสดงต่อหน้า หรือไม่ true / false
          			 // useRp:true,
			rp: 10, 	// กำหนดจำนวนรายการที่จะแสดงในแต่ละหน้า
			showTableToggleBtn: false,	 // กำหนดให้แสดงปุ่ม ซ่อน / แสดงตารางหรือไม่ true / false
			width: 1000, 	// กำหนดความกว้าง
			height: 400,
			singleSelect: true
  	// กำหนดความสูง
			});   
 
 
 
});
function doCommand(com, grid) {
 
if(com=='Add'){	//เหตุการณ์เมื่อมีการกดปุ่ม เพิ่มข้อมูล 
	$.fancybox({
				'width'				: '35%',
				'height'			: '35%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe',
				'href'			: 'add.php', // หน้าที่ต้องการจะให้บ๊อปอัพขึ้นมา
			});
 
	}else if (com == 'Edit') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
  //alert("Edit row " + id); 
$.fancybox({
				'width'				: '35%',
				'height'			: '35%',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'type'				: 'iframe',
				'href'			: 'edit.php?id='+id,//ค่่าที่ต้องการส่งไป ในที่นี้แบบ GET
			});
 
 
 
});
} else if (com == 'Delete') {
$('.trSelected', grid).each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
if(confirm('Are you sure you want to delete?')){
$.get('del.php?At_ID='+id, function(data) {
$.fancybox(data);
 
});
}
});
}
}
</script>
<body>
 <div id='tabs'>
    <ul>
        <li><a href='#tab1'>Tab 1</a></li>
        <li><a href='#tab2'>Tab 2</a></li>
        <li><a href='#tab3'>Tab 3</a></li>
    </ul>
     
    <div id='tab1'>Tab 1 Detail
	1
	<table id="table" style="display:none"></table>
	</div>

    <div id='tab2'>Tab 2 Detail
	2
	<table id="table1" style="display:none"></table>
	</div>

    <div id='tab3'>Tab 3 Detail
	3
	<table id="table2" style="display:none"></table>
	</div>
     
</div>
 
</body>
</html>